<div ng-controller="ConnectedClientsController">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title pull-left">{{title}}</h4>
			<span class="pull-right">v{{version}}</span>
			<div class="clearfix"></div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading pointer" data-toggle="collapse" data-target="#ClientsContainer">
			<h4 class="panel-title pull-left">Connected Clients</h4>
			<span class="pull-right">Count: {{ clientslength }}</span>
			<div class="clearfix"></div>
		</div>
		<div id="ClientsContainer" class="panel-collapse collapse in">
			<h3 class="text-center">wlan0</h3>
			<table class="table table-striped table-bordered text-center">
				<tr><th class="text-center">Mac Address</th><th class="text-center">Disassociate</th><th class="text-center">Deauthenticate</th><th class="text-center">Blacklist</th></tr>
				<tr ng-repeat="wlan0 in wlan0clients"><td>{{ wlan0 }}</td><td><button type="button" class="btn btn-danger" ng-click="disassociateMac(wlan0)">Disassociate</button></td><td><button type="button" class="btn btn-danger" ng-click="deauthenticateMac(wlan0)">Deauthenticate</button></td><td><button type="button" class="btn btn-danger" ng-click="addMacAddress(wlan0)">Blacklist</button></td></tr>
			</table>
			<h3 class="text-center">wlan0-1</h3>
			<table class="table table-striped table-bordered text-center">
				<tr><th class="text-center">Mac Address</th><th class="text-center">Disassociate</th><th class="text-center">Deauthenticate</th><th class="text-center">Blacklist</th></tr>
				<tr ng-repeat="wlan01 in wlan01clients"><td>{{ wlan01 }}</td><td><button type="button" class="btn btn-danger" ng-click="disassociateMac(wlan01)">Disassociate</button></td><td><button type="button" class="btn btn-danger" ng-click="deauthenticateMac(wlan01)">Deauthenticate</button></td><td><button type="button" class="btn btn-danger" ng-click="addMacAddress(wlan01)">Blacklist</button></td></tr>
			</table>
			<h3 class="text-center">wlan1</h3>
			<table class="table table-striped table-bordered text-center">
				<tr><th class="text-center">Mac Address</th><th class="text-center">Disassociate</th><th class="text-center">Deauthenticate</th><th class="text-center">Blacklist</th></tr>
				<tr ng-repeat="wlan1 in wlan1clients"><td>{{ wlan1 }}</td><td><button type="button" class="btn btn-danger" ng-click="disassociateMac(wlan1)">Disassociate</button></td><td><button type="button" class="btn btn-danger" ng-click="deauthenticateMac(wlan1)">Deauthenticate</button></td><td><button type="button" class="btn btn-danger" ng-click="addMacAddress(wlan1)">Blacklist</button></td></tr>
			</table>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading pointer" data-toggle="collapse" data-target="#DHCPContainer">
			<h4 class="panel-title pull-left">DHCP Leases</h4>
			<span class="pull-right">Count: {{ dhcplength }}</span>
			<div class="clearfix"></div>
		</div>
		<div id="DHCPContainer" class="panel-collapse collapse in">
			<table class="table table-striped table-bordered text-center">
				<tr><th class="text-center">Hostname</th><th class="text-center">IP Address</th><th class="text-center">MAC Address</th><th class="text-center">Blacklist</th></tr>
				<tr ng-repeat="dhcplease in dhcpleases"><td>{{ dhcplease[3] }}</td><td>{{ dhcplease[2] }}</td><td>{{ dhcplease[1] }}</td><td><button type="button" class="btn btn-danger" ng-click="addMacAddress(dhcplease[1])">Blacklist</button></td></tr>
			</table>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading pointer" data-toggle="collapse" data-target="#BlacklistContainer">
			<h4 class="panel-title pull-left">Blacklist</h4>
			<span class="pull-right">Count: {{ blacklistlength }}</span>
			<div class="clearfix"></div>
		</div>
		<div id="BlacklistContainer" class="panel-collapse collapse in">
			<table class="table table-striped table-bordered text-center">
				<tr><th class="text-center">MAC Address</th><th class="text-center">Remove</th></tr>
				<tr ng-repeat="mac in blacklist track by $index"><td>{{ mac }}</td><td><button type="button" class="btn btn-danger" ng-click="removeMacAddress(mac)">Remove</button></td></tr>
			</table>
		</div>
	</div>
</div>
